<template>
  <vxe-column v-bind="$attrs" v-on="$listeners">
    <template slot-scope="scope">
      <el-form-item v-if="isEdit(scope.row)" label="" :prop="$attrs.field" style="width: 100%">
        <custom-upload
          v-model="uploadWidget.fileList"
          name="uploadFile"
          :action="getUploadActionUrl(action)"
          :headers="getUploadHeaders"
          :data="data"
          :limit="limit"
          size="small"
          :type="fileListType"
          @change="onFileChange"
        />
      </el-form-item>
      <!-- 判断是否有default的slot -->
      <slot v-else-if="$slots.default || $scopedSlots.default" :row="scope.row" />
      <!-- 默认显示内容 -->
      <span v-else>{{ getRowValue(scope.row) }}</span>
    </template>
  </vxe-column>
</template>

<script>
import { TableInlintColumnMixins } from './tableInlineColumn.js';
import { uploadMixin } from '@/core/mixins';
import { UploadWidget } from '@/utils/widget.js';

export default {
  name: 'InlineUploadColumn',
  props: {
    /**
     * 上传文件类型，image/file
     * image: 图片
     * file: 文件
     */
    type: {
      type: String,
      default: 'file'
    },
    /**
     * 文件列表类型，dropdown/expand
     * dropdown: 列表在下拉框内
     * expand: 列表展开
     */
    fileListType: {
      type: String,
      default: 'expand'
    },
    /**
     * 上传的地址
     */
    action: {
      type: String,
      default: ''
    },
    /**
     * 上传时附带的额外参数
     */
    data: {
      type: Object,
      default: () => ({})
    },
    /**
     * 上传文件个数限制
     */
    limit: {
      type: Number
    },
    /**
     * 主键字段名
     */
    rowKey: {
      type: String
    },
    /**
     * 解析上传数据
     */
    parseUploadDataFunction: {
      type: Function
    }
  },
  mixins: [TableInlintColumnMixins, uploadMixin],
  data() {
    return {
      showPopover: false,
      uploadWidget: new UploadWidget(this.limit)
    };
  },
  methods: {
    getValue(value) {
      return this.fileListToJson(value);
    },
    onFileChange(val) {
      this.onChange(val);
    }
  },
  watch: {
    getRowData: {
      handler(value) {
        let row = (this.editConfig || {}).rowCopy;
        let downloadParams = {
          ...this.data
        };
        if (row && row[this.rowKey]) downloadParams[this.rowKey] = row[this.rowKey];
        this.uploadWidget.fileList = this.parseUploadDataFunction
          ? this.parseUploadDataFunction(value, row)
          : this.parseUploadData(value, downloadParams);
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.upload-image-item {
  height: 65px;
  width: 65px;
  line-height: 65px;
  text-align: center;
  font-size: 28px !important;
  border-radius: 4px;
  border: 1px dashed #d9d9d9;
}
.ellipsis-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hide-list /deep/ .el-dropdown__caret-button {
  display: none;
}
.upload-file-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0px;
}
.file-list-item {
  display: flex;
  align-items: center;
  margin-top: 5px;
  width: 100%;
  text-align: left;
}
.table-inline-upload /deep/ .el-upload {
  width: 100%;
}
</style>
